<!-- 入职管理 -->
<template>
  <div class="rthcHead">
    <div class="rthcImg">
      <img src="@/assets/img/personnelImage/岗位需求库.png">
      <span class="rthcTi" title="新员工入职查询">新员工入职查询</span>
    </div>
    <div class="rthc-handle">
      <span class="rthc-handle-pri">
        <el-button type="primary">员工入职</el-button>
      </span>
      <span class="rthc-handle-more">
        <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          <el-icon>
            <setting/>
        </el-icon>
        </span>
       <template v-slot:dropdown>
         <el-dropdown-menu>
           <el-dropdown-item icon="el-icon-plus">员工入职</el-dropdown-item>
           <el-dropdown-item icon="el-icon-circle-plus-outline">新建</el-dropdown-item>
           <el-dropdown-item icon="el-icon-check">删除</el-dropdown-item>
           <el-dropdown-item icon="el-icon-circle-check">修改</el-dropdown-item>
         </el-dropdown-menu>
       </template>
    </el-dropdown>
      </span>
    </div>
    <div class="rthc-handle">
      <span class="rthc-handle-pri">
        <el-button type="primary">用工需求申请</el-button>
      </span>
      <div class="rthc-handle-more">
       <el-dropdown>
          <el-icon>
            <setting/>
          </el-icon>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>员工入职</el-dropdown-item>
              <el-dropdown-item>新建</el-dropdown-item>
              <el-dropdown-item>用工需求申请</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
              <el-dropdown-item>修改</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
  <div style="height: 100%; min-height: 235px;">
    <div style="background: white">
      <div class="rthcink">
        <span class="rthc-quickearch-label">
          岗位名称 :
        </span>
        <div class="rthc-quickearch-style">
          <el-input v-model="input" placeholder="岗位名称" clearable />
        </div>
      </div>
      <div class="rthcink">
        <span class="rthc-quickearch-label">
          入职员工姓名 :
        </span>
        <div class="rthc-quickearch-style">
          <el-input v-model="input" placeholder="岗位名称" clearable />
        </div>
      </div>
    </div>
    <div class="rthc-list-table">
      <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :header-cell-style="{background:'#F7FBFE',color:'#606266'}"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="date"
            label="岗位名称"
            width="120">
        </el-table-column>
        <el-table-column
            prop="name"
            label="需求人数"
            width="120">
        </el-table-column>
        <el-table-column
            prop="address"
            label="发布部门"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="address"
            label="岗位状态"
            show-overflow-tooltip>
          <template #default="xx">
            <el-tag type="warning" v-if="xx.row.dstaus === '0'">待发布</el-tag>
            <el-tag type="success" v-else-if="xx.row.dstaus === '1'">招聘中</el-tag>
            <el-tag v-else-if="xx.row.dstaus === '2'">已关闭</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            width="120">
        </el-table-column>
        <el-table-column
            prop="hid"
            label="证件号码"
            width="120">
        </el-table-column>
        <el-table-column
            prop="yname"
            label="拟定岗位"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="d1"
            label="手机号码"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="de"
            label="邮箱地址"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="dstaus"
            label="审批流程ID"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="dstaus"
            label="办理状态"
            show-overflow-tooltip>
          <template #default="xx">
            <el-tag type="warning" v-if="xx.row.dstaus === '0'">审批中</el-tag>
            <el-tag type="success" v-else-if="xx.row.dstaus === '1'">审批通过</el-tag>
            <el-tag v-else-if="xx.row.dstaus === '2'">审批驳回</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div class="pag-block footer" style="">
      <div class="pag-block" style="">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
        </el-pagination>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      restaurants: [],
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      multipleSelection: []
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },
        { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
        { "value": "浏阳蒸菜", "address": "天山西路430号" },
        { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },
        { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },
        { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
        { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },
        { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },
        { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
        { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
        { "value": "阳阳麻辣烫", "address": "天山西路389号" },
        { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
      ];
    },
    handleSelect(item) {
      console.log(item);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  },
  mounted() {
    this.restaurants = this.loadAll();
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/css/personnelCss/RecruitHeadcount";
</style>
